<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue指令5(v-model)</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{name}}</h1>
    <hr>
    <i>v-model最基础展示，将文本框获取到的数值同步到下面显示</i><br><br>
    <input type="text" v-model="message" >
    <h2>{{message}}</h2>

    <hr>
    <i>v-model最基础展示，将文本框获取到的数值同步到下面显示</i><br><br>
    <i>注意这里message的写法，不是"message"或者{{message}}</i><br><br>
    <input type="text" v-model="message" @click="messagetip">只有呈现，未有逻辑的模板.html
    <h2>{{message}}</h2>

    <hr>
    <i>一键修改message预先设定的值</i><br><br>
    <input type="button" value="修改message的值" @click="messageset" >

    <ul>
        <li v-for="item in list">
            <p>{{item}}</p>
        </li>
    </ul>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            name:"这是一个用npm方式搭建的工程",
            message:"日拱一卒无有尽",
            list:["吃饭","睡觉","学习"]
        },
        methods:{
            messagetip:function () {
                // 注意这里message的写法，不是"message"或者{{message}}
                alert(this.message);
            },
            messageset:function () {
                this.message = "功不唐捐终入海"
            }
        }
    });
</script>
</body>
</html>